<template>
  <div class="container">
    <div :class="loginUserAppType == 4 ? 'bg-app-success_teacher' : 'bg-app-success' " :style="{height: navHeight+'px'}"></div>
    <div class="header-title-block" :class="loginUserAppType == 4 ? 'bg-app-success_teacher' : 'bg-app-success' ">
      <van-col span="6">
        <div class="text-left padding-lr-10 color-white">
            <span class="font-bold font-size-14" @click="returnIndex">
              <i class="fa fa-chevron-left"></i>
              {{$t("返回")}}
            </span>
        </div>
      </van-col>
      <van-col span="12" class="text-right padding-lr-10">
        <div class="text-center color-white font-size-16 font-bold">
          <span>{{$t('收据信息')}}</span>
        </div>
      </van-col>
      <van-col span="6" class="text-right">
        <span>&nbsp;</span>
      </van-col>
    </div>
    <div class="content-block" :style="divHeight10">
      <div class="content-content-block" :style="divHeight23">
        <img src="~static/img/zhang_bg.png" style="position: absolute;top: 25%; right: 0px;height: 200px;width: 60px;z-index: 9"/>

        <div class="content-header-block">
            <span>{{campusName}}</span>
        </div>

        <div class="margin-top-20">
          <div class="line-h-view"></div>
          <div class="line-h-view" style="margin-top: 2px"></div>
        </div>

        <template v-if="dataInfo.realName == undefined">
          <div class="text-center font-size-18 margin-top-60">
            {{$t("暂无数据")}}
          </div>

        </template>
        <template v-else>
          <div class="content-item margin-top-20">
            <div class="content-item-title pull-left">{{$t("付款人")}}</div>
            <div style="margin-left: 95px;font-size: 12px">{{ dataInfo.realName }}</div>
            <div class="moon-clearfix"></div>
          </div>
          <div class="content-item">
            <div class="content-item-title pull-left">{{$t("班级")}}</div>
            <div style="margin-left: 95px;font-size: 12px">{{ dataInfo.className }}</div>
            <div class="moon-clearfix"></div>
          </div>
          <div class="content-item">
            <div class="content-item-title pull-left">{{$t("证件类型")}}</div>
            <div style="margin-left: 95px;font-size: 12px">
              <label v-if="dataInfo.certificateType == '01'">{{$t("身份证")}}</label>
            </div>
            <div class="moon-clearfix"></div>
          </div>
          <div class="content-item">
            <div class="content-item-title pull-left">{{$t("证件号")}}</div>
            <div style="margin-left: 95px;font-size: 12px">{{ dataInfo.certificateNum }}</div>
            <div class="moon-clearfix"></div>
          </div>
          <div class="content-item" v-for="(item, index) in dataInfo.item" :key="index">
            <div class="content-item-title pull-left">{{$t("项目/金额")}}</div>
            <div style="margin-left: 95px;font-size: 12px">
              <span>{{item.name}}</span>
              <span class="color-success">(¥{{item.amount}})</span>
            </div>
            <div class="moon-clearfix"></div>
          </div>
          <div class="content-item" style="height: 50px">
            <div class="content-item-title pull-left">{{$t("收款总额")}}</div>
            <div style="margin-left: 95px;font-size: 12px">
              <div>{{ dataInfo.amountCN }}</div>
              <div class="color-success">(¥{{ dataInfo.amount }})</div>
            </div>
          </div>
          <div class="content-item">
            <div class="content-item-title pull-left">{{$t("收款日期")}}</div>
            <div style="margin-left: 95px;font-size: 12px">{{ $moment(dataInfo.payTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
            <div class="moon-clearfix"></div>
          </div>
          <div class="content-item">
            <div class="content-item-title pull-left">{{$t("单据编号")}}</div>
            <div style="margin-left: 95px;font-size: 12px">{{ dataInfo.payNo }}</div>
            <div class="moon-clearfix"></div>
          </div>
          <div class="content-item margin-top-30" style="position: relative">
            <div class="content-item-title pull-left">{{$t("收款单位")}}</div>
            <div style="margin-left: 95px;font-size: 12px">{{ dataInfo.accountName }}</div>
            <div class="moon-clearfix"></div>

            <img v-if="dataInfo['item'] && dataInfo['item'].length > 0" src="~static/img/school_zhang1.png" style="position: absolute;top: -20px; right: 30px;height: 80px;width: 80px"/>
          </div>

        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import {common} from "../../utils/api/url";
  import wx from "weixin-js-sdk";
  import qs from "qs";
  import mixins from "~/utils/mixins";
  import mixinsBridge from "~/utils/mixinsBridge";
  import MySex from "~/components/MySex";
  import {MessageError, MessageSuccess, MessageWarning} from "~/utils/utils";
  import {Toast} from "vant";
  export default {
    name: 'studentInfo',
    components: {MySex},
    layout: 'defaultAppScreen',
    mixins: [mixins,mixinsBridge],
    data(){
      return {
        sex: '',
        active: 6,
        dataInfo: []
      }
    },
    mounted() {

    },
    created() {
      this.isMiniprogram = false;
      wx.miniProgram.getEnv(res => {
        if (res.miniprogram) {
          this.isMiniprogram = true;
        }
      });
      this.initAppServer();
    },
    methods: {
      layoutInit(){

      },
      async initAppServer(){
        await this.getSessionInfo();

        this.initDetailInfo();
      },
      initDetailInfo(){
        let params = {};
        this.$axios.post(common.enroll_wx_pay_item_pay_info, {params: params}).then(res => {
          if (res.data.data){
            console.log(res.data.data);
            this.dataInfo = res.data.data;
          }
        });
      },
      returnIndex(){
        let url = '/newStudent/studentIndex'
        this.$router.push({
          path: url,
          query: {
            activeType: this.$route.query.activeType,
            userType: this.loginUserAppType,
            navH: this.navHeight,
            appType: this.globalAppShow,
            sessionId: this.$route.query.sessionId
          }
        });
      }
    }
  }
</script>

<style scoped>
.container {

}
.header-title-block{
  height: 60px;
  line-height: 60px;
  width: 100%;
}
.content-block{
  background: #4ba79c;
  width: 100%;
  position: relative;
}
.content-content-block{
  background: #FFFFFF;
  border-radius: 20px;
  padding: 20px;
  margin: 10px 10px;
  position: relative;
}
.content-item{
  padding: 5px 15px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
}
.content-item-title{
  text-align: right;
  width: 80px;
  font-weight: bold;
  color: #aaaaaa;
  font-size: 12px;
}
.content-item-value{
  color: #000000;
  font-weight: bold;
}
.line-h-view{
  border: 1px dashed #4ba79c;
}
.content-header-block{
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  color: #4ba79c;
}
</style>
